<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>李薇薇的个人博客</title>
  <style>
    ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:15px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#e6e6e6;
}

	body {
        background-image: url("bei.jpg"); /* 图片路径 */
        background-size: cover;          /* 覆盖整个页面 */
        background-repeat: no-repeat;   /* 防止平铺 */
        background-attachment: fixed;    /* 固定背景（可选） */
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
    }

    h1,a{
      color: white;
      text-align: center;
      margin-bottom: 10px;
    }
    a{
      display: block;
      text-decoration: none;
    }
 
    li {
      list-style: none;
    }
 
    .box {
      position: relative;
      margin: 100px auto;
      width: 1000px;
      height: 500px;
      background-color: pink;
	  overflow: hidden;
    }
	.box img{
		width: 100%;
		height: auto;
	}
 
    ol {
      display: flex;
      position: absolute;
      bottom: 30px;
      right: 400px;
    }
 
    ol li {
      margin-left: 15px;
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.7);
    }
    
 
    ol li.active {
      background-color: red; /* 激活状态的颜色 */
    }
 
  </style>
</head>
<body>
  <ul>
<li><a href="jieshao.html" target="_blank">自我介绍</a></li>
<li><a href="xuexi.html" target="_blank">学习资料</a></li>
<li><a href="liuyan.html" target="_blank">欢迎留言</a></li>
<li><a href="xuexiang.html" target="_blank">网页评价</a></li>
</ul>

<h1>这里是李薇薇的个人博客</h1><br />
<h1>谢谢你愿意来了解我！</h1>

  <div class="box">
    <img src="x5.jpg" alt="">
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <script>
    const arr = [
      {url:'x5.jpg'},
      {url:'x2.jpg'},
      {url:'x3.jpg'},
      {url:'x4.jpg'}
    ]
 
    const img = document.querySelector('.box img')  // 获取img对象
    const lis = document.querySelectorAll('ol li')
    console.log(lis);
    
 
    let index = 0 // 设置图片下标
    lis[index].classList.add('active'); // 第一张图的圆点默认激活
 
    function ChangImg() {
      lis.forEach(li => li.classList.remove('active')); // 清除所有小圆点的激活状态
      img.src = arr[index].url  // 处理图片
      lis[index].classList.add('active')  // 点亮当前圆点
      index = (index + 1) % arr.length  // 更新索引
    }
 
    setInterval(ChangImg, 1800)//表示图片多少秒更新一次，注意这里的单位是毫秒
 
  </script>
</body>
</html>